<script setup>
// 计算属性 => 基于一个已有的数据 计算得到一个数据(缓存)
import { ref, computed, onUpdated, nextTick } from 'vue'

const age = ref(22)
// 下一年的年纪
const nextAge = computed(() => {
  return +age.value + 1
})
// 下下年的年纪
const nextAge2 = computed({
  // 获取操作
  get() {
    return +age.value + 2
  },
  // 设置操作
  set(val) {
    console.log(val)
    age.value = val - 2
  },
})
</script>

<template>
  <div>
    今年的年纪: <input type="text" v-model="age" /> <br />
    明年的年纪: {{ nextAge }}<br />
    后年的年纪: <input type="text" v-model="nextAge2" />
  </div>
</template>
